.regions-tree-deep-skin {

  // view: home
  // 默认的背景色
  @darkBgColor: rgba(3, 12, 28, 1);
  // 默认文字颜色
  @darkPrimaryColor: #dededf;
  // 图标的颜色
  @darkIconColor: #00d0f6;
  
  // ----- 左侧菜单数据的风格 -------
  // 第一项背景色
  @darkTitleBarBgColor: #1a2637;
  // 文字的颜色
  @darkLabelTextColor: #1aa5bc;

  border:none;
  
  .regions-tree-current-name{
    color: #00f0ff;
    background-color: @darkBgColor;
  }

  // 树选择复用函数
  .tree-select-style {
    background-color:#202D3A;
    color: #dededf;
  }

  .no-tree-select-style {
    background-color: transparent;
    color: #dededf;
  }

  // el popular 样式
  .el-select-dropdown.resource-search-popper {
    border: 1px solid #2F6B8E;
    background-color: @darkBgColor;

    .el-select-dropdown__item {
      color: #fff;

      &.hover {
        background-color: @darkBgColor;
      }

      &.selected,
      &:hover {
        .tree-select-style();
      }
    }
  }

  .el-popper.resource-search-popper[x-placement^=bottom] {
    .popper__arrow {
      border-bottom-color: @darkBgColor;

      &:after {
        border-bottom-color: #2F6B8E;
      }
    }

    .el-select-dropdown__list {
      padding: 0;
    }
  }

  .el-tree {
    background-color: @darkBgColor;
    color: @darkPrimaryColor;

    .tree-label-item-arrow {
      display: block;
    }

    .is-expanded {
      .tree-label-item-arrow {
        transform: rotate(90deg);
        color: @darkIconColor;
      }
    }

    // 第一项的标题
    .tree-label-item {
      color: @darkLabelTextColor;
      font-weight: bold;
    }

    // 底部下划线
    .tree-item-border {
      &::after {
        content: '';
        display: block;
        width: 130%;
        height: 0px;
        border-bottom: 1px solid #1f2b3c;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    .el-tree-node__expand-icon {
      color: @darkIconColor;

      // 最后一级的不显示图标
      &.is-leaf {
        opacity: 0;
      }
    }

    .el-tree-node:focus {
      &>.el-tree-node__content {
        // 点击的时候，选中
        .tree-select-style();
        // .no-tree-select-style();
      }
    }

    // 选中的样式
    .is-current {
      >.el-tree-node__content {
        // .tree-select-style();
        // 选中的时候没有样式
        .no-tree-select-style();
      }

      .tree-label-item {
        color: #fff;
      }
    }
    
    .el-tree-node__content {

      &:active,
      &:focus,
      &:hover {
        .tree-select-style();
      }
    }
  }
  .filter-tree-scroll-box{
    background-color: @darkBgColor;
  }

  .regions-tree-body {
    border: none;
    background-color: @darkBgColor;
    box-shadow: 0px 0px 1px #333;
    top: calc(100% + 12px);

    .regions-tree-search {
      background-color: @darkBgColor;
      border-bottom: 1px solid #1b2736;
      .el-input__wrapper {
        border: none;
        box-shadow: unset;
        background-color: #1A2637;
      }

      .el-input__inner {   
        color: #fff;
      }
    }

    .regions-search-icon {
      color: #4F5F75;
    }

    .filter-tree-scroll {
      &::before {
        background-color: @darkBgColor;
      }
    }

    .filter-result {
      .isNoData {
        color: #00d8ff;
      }
    }

    ul {
      li {
        color: @darkPrimaryColor;

        .result-bg {
          background-color: @darkBgColor;
        }
      }
    }
  }

  .el-tree--highlight-current {
    .el-tree-node.is-current {
      >.el-tree-node__content {
        .tree-select-style();
      }
    }
  }

  .el-scrollbar__wrap {
    .el-tree {
      >.el-tree-node {
        .el-tree-node__content {
          :hover {
            background-color: rgba(0, 0, 0, 0) !important;
            .tree-select-style();
          }
        }
      }
    }
  }
}